<script setup lang="ts">
import {Button} from "@/components/ui/button";
import router from "@/router";

interface ErrorProps {
  code: number
  message: string
  subtitle: string
}

const props = defineProps<ErrorProps>()

</script>

<template>
  <div class="h-svh">
    <div class="m-auto h-full w-full flex flex-col items-center justify-center gap-2">
      <h1 class="text-[7rem] font-bold leading-tight">
        {{ props.code }}
      </h1>
      <span class="font-medium">
        {{ props.message }}
      </span>
      <p class="text-center text-muted-foreground" >
        {{ props.subtitle }}
      </p>
      <div class="mt-6 flex gap-4">
        <Button variant="outline" @click="router.back()">
          Go Back
        </Button>
        <Button @click="router.push('/')">
          Back to Home
        </Button>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
